<template>
  <div>
    <!-- 单向的, 数据变化视图跟着变 -->
    <!-- 用户名: <input :value="msg" type="text"> -->
    <!-- 双向数据绑定 -->
    用户名: <input v-model.trim="msg" type="text"><br>
    自我介绍: <textarea v-model.lazy="intro" name="" id="" cols="30" rows="10"></textarea><br>
    <!-- 
      注意事项:
        checkbox 很特殊, 它分为两种情况
        1. 绑定的值是数组
          会将当前复选框的 value 加入到数组中
          一般用于多选操作  例如多选题, 兴趣爱好
        2. 绑定的值是非数组 (隐式转换为 boolean)
          会将当前属性值同步给变量
     -->
    兴趣爱好:
    <input v-model="hobby" type="checkbox" value="smoke" />抽烟
    <input v-model="hobby" type="checkbox" value="drink" />喝酒
    <input v-model="hobby" type="checkbox" value="hotHead" />烫头
    <br>
    全选: <input v-model="isAll" type="checkbox"><br>
    <button @click="login">登录</button>
    年龄: <input v-model.number="age" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '123',
      intro: '',
      hobby: [],
      isAll: false,
      age: ''
    };
  },
  mounted() {
    
  },
  methods: {
    login() {
      console.log(this.msg)
    },
    
  },
};
</script>

<style>

</style>